<template>
	<view class="" :style="{'--themcolor':usethemestore.themecolor,'--themcolor2':usethemestore.themecolor2}">
		<view class="fixrop">
			<fixtitletopVue>
				<template #l>
					<view class="fix-l" @click="back">
						<view>
							<view class="iconfont icon-jiantou"></view>
						</view>
					</view>
				</template>
				<template #c>
					<view class="fix-c">
						<view>
							<view class="iconfont icon-552cd5c76f532"></view>
						</view>
					</view>
				</template>
			</fixtitletopVue>
		</view>
		<scroll-view class="conbox" scroll-y v-if="productxqdata" @scrolltolower="changepage">
			<image :src="'http://127.0.0.1:3006'+currentdata.img" mode="aspectFill"></image>
			<scroll-view scroll-y class="conbox-nr" v-if="productxqdata">
				<view class="pro-show">
					<scroll-view scroll-x>
						<view class="scrollbox">
							<view v-for="(i,index) in productxqdata.product.slice(0,4)" :key="index"
								:class="{selec:prochange==i.id}" @click="changecurr(i.id)">
								<view class="prod-t">
									<image :src="'http://127.0.0.1:3006'+i.img" mode="aspectFill"></image>
								</view>
								<view class="prod-b">
									<view class="prod-b-t" v-if="i.title.length>6">{{i.title.slice(0,6)}}</view>
									<view class="prod-b-t" v-else>{{i.title}}</view>
									<view class="prod-b-b">
										<view class="bb-l" v-if="i.title.length>6">{{i.title.slice(6)}}</view>
										<view class="bb-l" v-else></view>
										<view class="bb-r">￥{{i.price}}</view>
									</view>
								</view>
							</view>
						</view>
					</scroll-view>
					<view class="" @click="popall">
						<view class="iconfont icon-gengduo"></view>
						<view class="">全</view>
						<view class="">部</view>
						<view class="">（6）</view>
					</view>
				</view>
				<view class="pricebox">
					<view class="pti-price">
						<view class="">
							<text>￥</text>{{currentdata.price}}
						</view>
						<view class="hot">热卖中</view>
					</view>
					<view class="pti-name">
						<view class="l">
							{{currentdata.title}}
						</view>
						<view class="r" v-if="!islove" @click="golove(true)">
							<view class="iconfont icon-xingxing"></view>
							收藏
						</view>
						<view class="r" v-else @click="golove(false)">
							<view class="iconfont icon-xingxing1"></view>
							已收藏
						</view>
					</view>
					<view class="xx">
						<view class="xx-l">
							<view class="">服务 <text>放心吃</text> </view>
						</view>
						<view class="xx-r"></view>
					</view>
					<view class="xx">
						<view class="xx-l">
							<view class="">商家 <text>兮沒店</text> </view>
						</view>
						<view class="xx-r "></view>
					</view>
					<view class="xx">
						<view class="xx-l">
							<view class="">时间 <text>{{currentdata.createdAt}}</text> </view>
						</view>
						<view class="xx-r "></view>
					</view>
				</view>
				<view class="taoc">
					<view class="taoc-ti">
						<text>套餐详情</text>
						<view class="">价格详情 <view class="icon wen">?</view>
						</view>
					</view>
					<view class="taoc-b">{{currentdata.title}}</view>
				</view>
				<view class="shopperbox" v-if="productxqdata">
					<view class="shopperbox-l-l">
						<image v-if="productxqdata.shoper.img.includes('http')" :src="productxqdata.shoper.img"
							mode="aspectFill"></image>
						<image v-else :src="'http://127.0.0.1:3006'+productxqdata.shoper.img" mode="aspectFill"></image>
					</view>
					<view class="shopperbox-l-r" @click="goshopperxq(productxqdata.shoper)">
						<view class="shopperbox-tit">
							<view class="">{{productxqdata.shoper.dname}}</view>
							<view class="lll">店铺详情 <view class="iconfont icon-jiantou"></view>
							</view>
						</view>
						<view class="" style="color: var(--themcolor)">4.5分</view>
					</view>
				</view>
<!-- 				<view class="taoc">
					<view class="taoc-ti">
						<text>用户评价</text>
						<view class="">查看全部 <view class="iconfont icon-jiantou"></view>
						</view>
					</view>
					<view class="taoc-b">
						<view class="" v-for="i in 6" :key="i">满意</view>
					</view>
				</view> -->
				<view class="cai">
					<titcaordVue tit="猜你还想看" />
					<view class="" @click="goxq(i)" v-for="i in showproddata" :key="i.id">
						<productCardVue :data="i" />
					</view>
					<uni-load-more :status="currentpagedata.length<4?'no-more':'loading'"></uni-load-more>
				</view>
				<view style="height: 130rpx;"></view>
			</scroll-view>
		</scroll-view>
		<view class="fix-bot" v-if="currentdata">
			<view class="l" @click="gocall">
				<view class="iconfont icon-dianhua"></view>
			</view>
			<view class="r" @click="showmai">
				<view class="t"><text>￥</text>{{currentdata.price}}</view>
				<view class="b">单独购买</view>
			</view>
		</view>

		<uni-popup ref="popup" type="bottom" border-radius="10px 10px 0 0" v-if="productxqdata">
			<view class="popbox">
				<view class="pop-tit">
					<view class=""></view>
					<view class="">本店套餐</view>
					<view class="xx" @click="popclose">x</view>
				</view>
				<scroll-view scroll-y>
					<view class="pop-item" v-for="(i,index) in productxqdata.product" :key="i.id"
						:class="{selec:prochange==i.id}" @click="changecurr(i.id,true)">
						<productCardVue :data="i" :isfen="false" />
					</view>
				</scroll-view>
			</view>
		</uni-popup>
		<aixin v-if="aixinshow" color="red" icon="icon-xingxing1" />
		<uni-popup ref="popupmai" type="bottom" border-radius="10px 10px 0 0" v-if="currentdata">
			<view class="maibox">
				<view class="maibox-tit">
					<view class="m-tit-t">
						购买说明
					</view>
					<view class="m-tit-b">
						<view class="item">
							<view class="iconfont icon-weixinzhifu"></view>
							<view class="">提交订单</view>
						</view>
						<view class="line"></view>
						<view class="item">
							<view class="iconfont icon-shangjia"></view>
							<view class="">商家做餐</view>
						</view>
						<view class="line"></view>
						<view class="item">
							<view class="iconfont icon-001diandongche"></view>
							<view class="">骑手送餐</view>
						</view>
					</view>
				</view>
				<view class="proimg">
					<view class="imgll">
						<view class="image">
							<image :src="'http://127.0.0.1:3006'+currentdata.img" mode="aspectFill"></image>
						</view>
						<view class="imgll-ll">
							<view class="pri">
								<text>￥</text>
								{{currentdata.price}}
							</view>
							<view class="pro-nr">{{currentdata.title}}</view>
							<view class="pro-selected">已选：{{kwdata[currselect]}}</view>
						</view>
					</view>
					<view class="imgrr" @click="exitmaipop">
						X
					</view>
				</view>
				<view class="sum">
					<view class="l">数量</view>
					<view class="r">
						<view class="add" @click="sjj">-</view>
						<view class="">{{prosum}}</view>
						<view class="jj" @click='sadd'>+</view>
					</view>
				</view>
				<view class="lx">
					<view class="lx-tit">
						口味
					</view>
					<view class="lx-box" v-if="kwdata">
						<view class="" v-for="(i,index) in kwdata" :key="index" :class="{selced:index==currselect}"
							@click="changeselected(index)">{{i}}</view>
					</view>
				</view>
				<view class="" style="height: 110rpx;"></view>
				<view class="maipopfix" @click="maipro">购买商品</view>
			</view>
		</uni-popup>
	</view>
</template>

<script setup>
	import {
		onReady,
		onLoad
	} from '@dcloudio/uni-app'
	import {
		ref,
		computed,
		watch
	} from 'vue'
	import fixtitletopVue from '../../components/fixtitletop/fixtitletop.vue';
	import titcaordVue from '../../components/titcaord/titcaord.vue';
	import productCardVue from '../../components/product-card/product-card.vue';
	import aixin from '@/components/aixin/aixin.vue'
	import themestore from '@/store/theme.js'
	import {
		sgetproductxq,
		sgetproducts,
		setlovess,
		dellovess,
		islovesss
	} from '@/api/index.js'
	import userstore from '@/store/user.js'
	import addressstore from '@/store/address.js'
	import lookhis from '../../store/lookhis';
	const uselookhis = lookhis()
	const useuserstore = userstore()
	const useaddressstore = addressstore()
	const usethemestore = themestore()
	const prochange = ref(0)
	const popup = ref()
	const islove = ref(false)
	const aixinshow = ref(false)
	const popupmai = ref()
	const currselect = ref(0)
	const prosum = ref(1)
	const productxqdata = ref()
	const showproddata = ref([])
	const kwdata = ref()
	const offset = ref(1)
	const limit = ref(4)
	const currentpagedata = ref([])
	onLoad(e => {
		prochange.value = e.id
		sssgetproductxq(e.userid)
		sssgetproducts()
	})
	const lookprod = (data) => {
		// console.log(data)
            uselookhis.pushdata(data)
	}
	const changepage = () => {
		if (currentpagedata.value.length < 4) return
		offset.value++
		sssgetproducts()
	}
	const currentdata = computed(() => {
		if (!productxqdata.value) return
		const data = productxqdata.value.product.find(e => e.id == prochange.value)
		const jsonStr = data.kw.replace(/'/g, '"');
		const arr = JSON.parse(jsonStr);
		kwdata.value = arr
		lookprod(data)
		return data
	})
	watch(() => currentdata.value, () => {
		isornotlove()
	}, {
		deep: true
	})
	const isornotlove = async () => {
		const rudata = await islovesss(useuserstore.userinfo.id, currentdata.value.id)
		if (rudata.code == 200) {
			islove.value = rudata.data
		}
	}
	const sssgetproductxq = async (userid) => {
		const rudata = await sgetproductxq(userid)
		if (rudata.code == 200) {
			productxqdata.value = rudata.data
		}
	}
	const sadd = () => {
		prosum.value++
	}
	const sjj = () => {
		if (prosum.value == 1) {
			return
		}
		prosum.value--
	}
	const exitmaipop = () => {
		popupmai.value.close()
	}
	const changeselected = e => {
		currselect.value = e
	}
	const showmai = () => {
		popupmai.value.open()
	}
	const changecurr = (e, isopen) => {
		prochange.value = e
		currselect.value = 0
		prosum.value = 1
		
		if (isopen) {
			popclose()
		}
	}
	const back = () => {
		uni.navigateBack()
	}
	const popall = () => {
		popup.value.open()
	}
	const goxq = (i) => {
		uni.redirectTo({
			url: `/pages/producet-xq/producet-xq?userid=${i.shoperid}&id=${i.id}`
		})
	}
	const popclose = () => {
		popup.value.close()
	}
	const golove = async e => {
		if (e) {
			const rudata = await setlovess(useuserstore.userinfo.id, currentdata.value.id)
			if (rudata.code == 200) {
				aixinshow.value = true
				islove.value = e
				setTimeout(() => {
					aixinshow.value = false
				}, 1000)
			}
			return
		}
		const rudata = await dellovess(useuserstore.userinfo.id, currentdata.value.id)
		if (rudata.code == 200) {
			islove.value = e
		}
	}
	const goshopperxq = (data) => {
		uni.navigateTo({
			url: `/pages/shop-xq/shop-xq?shoperdata=${JSON.stringify(data)}`
		})
	}
	const gocall = () => {
		uni.makePhoneCall({
			phoneNumber: productxqdata.value.shoper.phone,
		})
	}
	//////
	const maipro = () => {
		const sneddata = {
			sum: prosum.value,
			userid: useuserstore.userinfo.id,
			currentdata: currentdata.value,
			kw: kwdata.value[currselect.value],
			shoppername: productxqdata.value.shoper.dname
		}
		popupmai.value.close()
		uni.navigateTo({
			url: `/pages/order-get/order-get?data=${JSON.stringify(sneddata)}`
		})
	}
	const sssgetproducts = async () => {
		const rudata = await await sgetproducts(useaddressstore.address, offset.value, limit.value)
		if (rudata.code == 200) {
			currentpagedata.value = rudata.data
			showproddata.value = [...showproddata.value, ...rudata.data]
		}
	}
</script>

<style lang="scss" scoped>
	.maibox {
		max-height: 60vh;
		width: 100%;
		background-color: #fff;
		border-radius: 30rpx 30rpx 0 0;
		overflow: auto;

		.maipopfix {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 110rpx;
			background-color: var(--themcolor);
			font-size: 33rpx;
			font-weight: 700;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #fff;
		}

		.lx {
			height: fit-content;
			padding: 0 20rpx;

			.lx-tit {
				height: 70rpx;
				display: flex;
				align-items: center;
				font-size: 27rpx;
				color: #7b7b7b;
			}

			.lx-box {
				display: grid;
				grid-template-columns: repeat(3, 1fr);
				gap: 20rpx;

				>view {
					height: 50rpx;
					width: 90%;
					border-radius: 20rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					background-color: #eee;
					font-size: 27rpx;

				}

				.selced {
					border: 5rpx solid var(--themcolor);
					background-color: var(--themcolor2);
					color: var(--themcolor);
					font-weight: 700;
				}

			}
		}

		.sum {
			height: 60rpx;
			padding: 0 20rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.l {
				font-size: 27rpx;
				color: #7b7b7b;
			}

			.r {
				display: flex;
				justify-content: center;
				align-items: center;
				gap: 20rpx;

				.add,
				.jj {
					height: 45rpx;
					width: 45rpx;
					border-radius: 20rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 40rpx;
					font-weight: 700;
				}

				.add {
					border: 3rpx solid #7b7b7b;
					color: #7b7b7b;
				}

				.jj {
					background-color: var(--themcolor);
					color: #fff;
				}
			}
		}

		.proimg {
			height: 250rpx;
			padding: 20rpx;
			display: flex;

			.imgll {
				height: 100%;
				flex: 1;
				display: flex;
				gap: 15rpx;

				image {
					height: 200rpx;
					width: 200rpx;
					border-radius: 15rpx;
				}

				.imgll-ll {
					flex: 1;
					display: flex;
					flex-direction: column;
					justify-content: space-around;

					.pri {
						color: var(--themcolor);
						font-size: 45rpx;
						font-weight: 700;

						text {
							font-size: 25rpx;
						}
					}

					.pro-nr {
						font-size: 28rpx;
						font-weight: 700;
					}

					.pro-selected {
						font-size: 25rpx;
						color: #7b7b7b;
					}
				}
			}

			.imgrr {
				width: 50rpx;
				height: 100%;
				display: flex;
				justify-content: center;
				align-self: flex-start;
				font-size: 30rpx;
			}
		}

		.maibox-tit {
			height: 130rpx;
			background-color: #eee;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			padding: 20rpx;

			.m-tit-t {
				font-size: 28rpx;
			}

			.m-tit-b {
				font-size: 25rpx;
				color: #7b7b7b;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.item {
					display: flex;
					gap: 10rpx;
					align-items: center;

					.iconfont {
						font-size: 26rpx;
						font-weight: 700;
					}
				}

				.line {
					height: 1rpx;
					width: 30rpx;
					border: 1rpx dashed #7b7b7b;

				}
			}
		}
	}

	.selec {
		border: 5rpx solid var(--themcolor) !important;
	}

	.conbox::-webkit-scrollbar {
		display: none !important;
	}

	.popbox {
		height: 60vh;
		background-color: #fff;
		border-radius: 30rpx 30rpx 0 0;
		padding: 20rpx;

		scroll-view {
			height: calc(100% - 90rpx);

			&::-webkit-scrollbar {
				display: none;
			}

			.pop-item {
				border-radius: 20rpx;
				padding: 0 10rpx;
			}
		}

		.pop-tit {
			height: 90rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 30rpx;
			font-weight: 700;

			.xx {
				font-size: 40rpx;
			}
		}
	}

	.conbox {
		height: 100vh;
		width: 100vw;
		overflow: hidden;

		.conbox-nr {
			height: fit-content;
			background-color: #eee;
			border-radius: 30rpx 30rpx 0 0;
			margin-top: -40rpx;
			opacity: 0.999;
			padding: 20rpx;

			&::-webkit-scrollbar {
				display: none;
			}

			.cai {
				margin-top: 20rpx;
				height: fit-content;
				background-color: #fff;
				padding: 10rpx;
				border-radius: 15rpx;
			}

			.shopperbox {
				width: 100%;
				height: 150rpx;
				background-color: #fff;
				border-radius: 20rpx;
				margin-top: 20rpx;
				padding: 10rpx;
				display: flex;
				align-items: center;
				gap: 20rpx;
				margin-bottom: 20rpx;

				.shopperbox-l-l {
					width: 100rpx;
					height: 100rpx;

					image {
						height: 100%;
						width: 100%;
						border-radius: 15rpx;
					}
				}

				.shopperbox-l-r {
					flex: 1;
					display: flex;
					flex-direction: column;
					justify-content: center;
					font-size: 25rpx;
					gap: 20rpx;

					.shopperbox-tit {
						display: flex;
						justify-content: space-between;
						align-items: center;
						font-weight: 700;
						font-size: 30rpx;

						.lll {
							display: flex;
							align-items: center;
							color: #7b7b7b;
							font-weight: 0;
							font-size: 25rpx;

							.iconfont {
								margin-left: 5rpx;
								font-size: 23rpx;
								transform: rotate(180deg);
							}
						}
					}
				}
			}

			.taoc {
				width: 100%;
				height: 150rpx;
				background-color: #fff;
				border-radius: 20rpx;
				padding: 10px;
				display: flex;
				justify-content: center;
				flex-direction: column;
				align-items: flex-start;
				gap: 20rpx;
				font-size: 25rpx;

				.taoc-b {
					display: flex;
					gap: 25rpx;

					>view {
						padding: 10rpx 15rpx;
						background-color: var(--themcolor2);
						border-radius: 15rpx;
						font-size: 23rpx;
					}
				}

				.taoc-ti {
					width: 100%;
					font-size: 30rpx;
					font-weight: 700;
					display: flex;
					align-items: center;
					justify-content: space-between;

					>view {
						display: flex;
						align-items: center;
						gap: 10rpx;
						font-size: 25rpx;
						color: #7b7b7b;

						.iconfont {
							font-size: 25rpx;
							transform: rotate(180deg);
						}

						.wen {
							height: 30rpx;
							width: 30rpx;
							border-radius: 50%;
							border: 1rpx solid #7b7b7b;
							color: #7b7b7b;
							font-weight: 0;
							display: flex;
							align-items: center;
							justify-content: center;
						}
					}
				}
			}

			.pricebox {
				background-color: #fff;
				width: 100%;
				height: fit-content;
				margin: 20rpx 0;
				border-radius: 20rpx;
				padding: 0 20rpx;

				.pti-price {
					height: 100rpx;
					display: flex;
					align-items: center;
					font-size: 55rpx;
					color: var(--themcolor);
					font-weight: 700;
					display: flex;
					justify-content: space-between;

					.hot {
						font-size: 25rpx;
						color: #7b7b7b;
						font-weight: 0;
					}

					text {
						font-size: 30rpx;
					}
				}

				.pti-name {
					max-height: 100rpx;
					display: flex;
					align-items: center;
					gap: 10rpx;

					.l {
						flex: 1;
						overflow: hidden;
						font-size: 30rpx;
						font-weight: 700;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
					}

					.r {
						height: 30px;
						padding: 0 15rpx;
						font-size: 25rpx;
						font-weight: 700;
						background-color: #eee;
						border-radius: 25rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						gap: 5rpx;

						.iconfont {
							color: var(--themcolor);
						}
					}
				}

				.xx {
					height: 80rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					font-size: 25rpx;

					.xx-l {
						color: #7b7b7b;

						text {
							margin-left: 20rpx;
							color: #000;
						}
					}

					.iconfont {
						font-size: 23rpx;
						transform: rotate(180deg);
						color: #7b7b7b;
					}
				}
			}

			.pro-show {
				height: 220rpx;
				display: flex;

				scroll-view {
					flex: 1;
					overflow: hidden;

					.scrollbox {
						height: 100%;
						width: 100%;
						white-space: nowrap;
						padding: 10rpx 0;


						>view {
							display: inline-block;
							margin-right: 20rpx;
							height: 100%;
							width: 170rpx;
							background-color: #fff;
							border-radius: 20rpx;
							overflow: hidden;
							padding: 10rpx;

							.prod-t {
								height: 60%;

								image {
									height: 100%;
									width: 100%;
									border-radius: 10rpx;
								}
							}

							.prod-b {
								height: 40%;
								font-size: 23rpx;

								.prod-b-t {
									height: 50%;
									line-height: 44rpx;
								}

								.prod-b-b {
									height: 50%;
									display: flex;
									align-items: center;
									justify-content: space-between;

									.bb-l {
										width: 80rpx;
										overflow: hidden;
										white-space: nowrap;
										text-overflow: ellipsis;
									}

									.bb-r {
										flex: 1;
										color: var(--themcolor);
										display: flex;
										justify-content: center;
										align-items: center;
										font-weight: 700;
									}
								}
							}
						}
					}
				}

				>view {
					height: 100%;
					width: 50rpx;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					font-size: 25rpx;

					.iconfont {
						font-size: 25rpx;
						margin-bottom: 5rpx;
					}
				}

			}
		}

		image {
			height: 35vh;
			width: 100%;
			opacity: 0.999;
		}

	}

	.fix-bot {
		height: 110rpx;
		width: 100%;
		position: fixed;
		bottom: 0;
		left: 0;
		display: flex;

		.l {
			width: 30%;
			background-color: var(--themcolor2);
			display: flex;
			justify-content: center;
			align-items: center;

			.iconfont {
				font-size: 40rpx;
				color: var(--themcolor);
				font-weight: 700;
			}
		}

		.r {
			flex: 1;
			background-color: var(--themcolor);
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			gap: 10rpx;
			color: #fff;
			font-weight: 700;

			text {
				font-size: 25rpx;
			}
		}
	}

	.fixrop {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 99;
		width: 100%;

		.fix-l {
			height: 100%;
			width: 100%;
			display: flex;
			align-items: center;
			padding-left: 20rpx;

			>view {
				height: 60rpx;
				width: 60rpx;
				border-radius: 50%;
				background-color: rgba(255, 255, 255, 0.5);
				backdrop-filter: blur(5rpx);
				display: flex;
				align-items: center;
				justify-content: center;

				.iconfont {
					font-size: 25rpx;
				}
			}
		}

		.fix-c {
			height: 100%;
			width: 100%;
			display: flex;
			justify-content: flex-end;
			align-items: center;
			padding-right: 80rpx;

			>view {
				height: 60rpx;
				width: 60rpx;
				border-radius: 50%;
				background-color: rgba(255, 255, 255, 0.5);
				backdrop-filter: blur(10rpx);
				display: flex;
				align-items: center;
				justify-content: center;

				.iconfont {
					font-size: 30rpx;
					color: #50c131;
				}
			}
		}

	}
</style>